<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header class="flex">
      <div class="hedlogo">
        <span>logo</span>
      </div>
      <div
        class="flex nav_box d-none d-lg-block"
        v-for="(item, index) in menus"
        :key="index"
      >
        <el-dropdown @command="handleCommand">
          <div
            class="block-item db-pointer flex ai-center"
            @click="gotoRouteHandle(item)"
          >
            <div
              class="nav_text font-16 margin-l-10 margin-r-6"
              style="color: #ffffff;"
            >
              {{ item.name }}
            </div>
            <div style="width: 20px;">
              <span
                class="icon iconfont icon-xiala font-16"
                v-if="item.children && item.children.length > 0"
              ></span>
            </div>
          </div>
          <el-dropdown-menu
            class="nav-dropdown-menu"
            :class="item.children && item.children.length > 0 ? '' : 'hide'"
            slot="dropdown"
          >
            <el-dropdown-item
              v-for="(child, i) in item.children"
              :key="i"
              @click="gotoRouteHandle(child.path)"
              :command="child.path"
            >
              {{ child.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="header-logout d-none d-lg-block">
        <el-button class="btn-blue2" size="large" type="info" @click="logout">
          退出
        </el-button>
      </div>

      <div class="header-icon">
        <i
          class="d-block d-sm-none"
          @click="drawer = true"
          :class="'el-icon-s-unfold'"
          style="font-size: 30px; color: #fff;"
        ></i>
        <el-drawer
          :visible.sync="drawer"
          direction="ttb"
          :before-close="handleClose"
        >
          <div class="d-grid" v-for="(m, index) in menus" :key="index">
            <button
              type="button"
              class="btn btn-block btn-outline-secondary"
              @click="routePath(m.path)"
            >
              {{ m.name }}
            </button>
          </div>
        </el-drawer>
      </div>
    </el-header>

    <!-- 页面主体区域 -->
    <template>
      <WebHeader class="web_header"></WebHeader>
      <div style="background: #f5f5f5; margin-top: -30px;">
        <keep-alive>
          <router-view />
        </keep-alive>
      </div>
      <WebFooter></WebFooter>
    </template>
  </el-container>
</template>
<script>
import WebHeader from '@/components/web-header/web-header'
import WebFooter from '@/components/web-footer/web-footer'
export default {
  components: {
    WebHeader,
    WebFooter,
  },
  data() {
    return {
      drawer: false,
      menus: [
        {
          name: '首页',
          id: 0,
          path: '/home',
        },
        {
          name: '其他',
          id: 1,
          children: [
            {
              name: 'other',
              id: 3,
              path: '/other',
            },
          ],
        },
        {
          name: '表格列表',
          id: 4,
          path: '/cockpit',
        },
        {
          name: '组件',
          id: 5,
          path: '/history',
        },
      ],
    }
  },
  methods: {
    routePath(key) {
      this.$router.push({ path: key })
      this.drawer = false
    },
    handleClose(key, keyPath) {
      console.log(key, '000')
      this.drawer = false
    },
    logout() {
      console.log('你已退出')
    },
    handleCommand(command) {
      if (command) this.$router.push({ path: command })
    },
    // 跳转至指定路由
    gotoRouteHandle(item) {
      console.log('跳转至指定路由', item)
      if (item.path) {
        this.$router.push({ path: item.path })
      }
    },
  },
}
</script>
<style scoped lang="scss">
.web_header {
  position: absolute;
  top: -60px;
  z-index: -99;
}
.hedlogo {
  height: 32px;
  width: 163px;
  border: 1px solid #000;
  background: #18224d;
  color: #fff;
  margin: 14px 14px 14px 0px;
  text-align: center;
  line-height: 32px;
}
.header-icon {
  position: absolute;
  right: 10px;
  top: 13px;
}
.header-logout {
  right: 10px;
  line-height: 60px;
  position: absolute;
}
.el-menu {
  border-right: 0px;
}
::v-deep .el-drawer__header {
  margin-bottom: 0;
  padding: 0;
}
::v-deep .el-drawer {
  height: auto !important;
}

.nav_box {
  height: 60px;
  line-height: 60px;
}
.nav_text:hover {
  color: #fdd000 !important;
}
</style>

<style lang="scss">
.el-popper.nav-dropdown-menu {
  background-color: #000;
  border: 1px solid #000;

  .el-dropdown-menu__item {
    color: #fff !important;
  }

  .popper__arrow::after {
    border-bottom-color: #000 !important;
    border-top-color: #000 !important;
  }

  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #292929 !important;
  }

  &.hide {
    background-color: transparent !important;
    border-color: transparent !important;

    .el-dropdown-menu__item {
      color: transparent !important;
    }

    .popper__arrow {
      border: none;
    }

    .popper__arrow::after {
      border: none;
    }

    .el-dropdown-menu__item:not(.is-disabled):hover {
      background: transparent !important;
    }
  }
}
</style>
